<template>
  <div class="content">
    <!-- 头部 -->
    <div class="header">
      <div class="header-left"></div>
      <!-- <van-search placeholder="搜索商品 共1312款好物" /> -->
      <SearchBar></SearchBar>
      <div class="loginBtn">登录</div>
    </div>

    <!-- 中间切换 -->
    <van-tabs swipeable class="swipeable">
      <!-- <van-tab v-for="index in 8" :title="'标签 ' + index">
        内容 {{ index }}
      </van-tab> -->
      <van-tab title="推荐">
        <!-- 轮播 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="../../assets/images-yaning/bnner1.webp" alt="" class="swpierimg" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/images-yaning/bnner1.webp" alt="" class="swpierimg" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/images-yaning/bnner1.webp" alt="" class="swpierimg" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="../../assets/images-yaning/bnner1.webp" alt="" class="swpierimg" />
          </van-swipe-item>
        </van-swipe>

        <!-- 轮播底部 -->

        <div class="iconList">
          <div class="iconItem" v-for="(three, index) in policyDescList" :key="index">
            <img class="iconImg" :src="three.icon" />
            <span class="iconText">{{ three.desc }}</span>
          </div>
        </div>

        <!-- main 12个小图 -->
        <div class="home-wrapper">
          <div class="home-wrapper-item" v-for="(wrappe, index) in kingKongList" :key="index">
            <img :src="wrappe.picUrl" class="wrapimg" />
            <span class="text">{{ wrappe.text }}</span>
          </div>
        </div>

        <!-- 中间动态图 -->
        <div class="home-main">
          <div class="floor">
            <div class="floor-top">
              <img src="../../assets/images-yaning/e.webp" alt="" class="floor-img" />
            </div>
          </div>
          <div class="floor-bot">
            <div class="floor-item1"><img src="../../assets/images-yaning/d.webp" alt="" class="img" /></div>
            <div class="floor-item2"><img src="../../assets/images-yaning/c.webp" alt="" class="img" /></div>
            <div class="floor-item3"><img src="../../assets/images-yaning/e.webp" alt="" class="img" /></div>
          </div>
        </div>

        <!-- 新人专享礼 -->
        <div class="newman">
          <div class="newmantop">
            <span class="text">新人专享礼</span>
          </div>
          <div class="newmanbot">
            <div class="left">
              <div class="name">新人专享礼包</div>
              <div class="imgWrap">
                <img src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" class="img" />
              </div>
            </div>

            <div class="right">
              <!-- 右上 -->
              <div class="module1">
                <div class="cnt">
                  <div class="title">福利社</div>
                  <div class="subTitle">今日特价</div>
                </div>
                <div class="pic">
                  <img
                    src="https://yanxuan-item.nosdn.127.net/bb9025c24057dfb89403055ac5b9f85c.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=200x200"
                    class="img"
                  />
                </div>
              </div>
              <!-- 右下 -->
              <div class="module2">
                <div class="cnt">
                  <div class="title">新人拼团</div>
                  <div class="tag">1元起包邮</div>
                </div>
                <div class="pic">
                  <img
                    src="https://yanxuan-item.nosdn.127.net/c4c4a69e885fba10eded4478102695a2.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=200x200"
                    class="img"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 热销榜 -->
        <div class="hot">
          <div class="hotshop">类目热销榜</div>
          <div class="hotcenter">
            <div class="left" v-for="category in categoryList2" :key="category.picUrl">
              <div class="leftname">{{ category.categoryName }}</div>
              <img class="img" :src="category.picUrl" alt="" />
            </div>
          </div>
          <div class="hotbottom">
            <div class="hotbottom-item" v-for="(category3, index) in categoryList3" :key="index">
              <div class="name">{{ category3.categoryName }}</div>
              <img class="img" :src="category3.picUrl" alt="" />
            </div>
          </div>
        </div>

        <!-- 最后 -->
        <div class="end">
          <div class="endleft">
            <div class="big">{{ ((fooltImg[0] || {}).styleBanner || {}).title }}</div>
            <div class="small">{{ ((fooltImg[0] || {}).styleBanner || {}).desc }}</div>
          </div>
          <div class="endright">
            <div class="big">{{ ((fooltImg[1] || {}).styleItem || {}).title }}</div>
            <div class="small">{{ ((fooltImg[1] || {}).styleItem || {}).desc }}</div>
            <div class="buttom">
              <img class="img" :src="(((fooltImg[1] || {}).styleItem || {}).picUrlList || [])[0]" alt="" />
              <img class="img" :src="(((fooltImg[1] || {}).styleItem || {}).picUrlList || [])[1]" alt="" />
            </div>
          </div>
        </div>

        <!-- footer -->
        <div class="footer">
          <div class="top">
            <button class="btn">下载APP</button>
            <button class="btn">电脑版</button>
          </div>
          <div class="end">网易公司版权所有 © 1997-</div>
          <div class="end">食品经营许可证：JY13301080111719</div>
        </div>
      </van-tab>

      <van-tab
        :title="category.categoryName"
        v-for="(category, index) in categoryList"
        :key="index"
        :id="category.extra.operationResource.categoryId * 1"
        class="van-tab"
      >
        <Item :category="category" :id="category.extra.operationResource.categoryId * 1"></Item>
      </van-tab>
    </van-tabs>
    <TabBar></TabBar>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Item from '../../components/item/item.vue'
export default defineComponent({
  name: 'Home',
  components: {
    Item
  }
})
</script>

<script lang="ts" setup>
import homeapi from '../../api/home/home'
import { showFailToast } from 'vant'
import { ref, onMounted, computed } from 'vue'

// 数据列表
const recommendList = ref<any>()

// 获取首页数据列表
const getrecommend = async () => {
  try {
    const res = await homeapi.recommend()
    recommendList.value = res.data.data
  } catch (error) {
    showFailToast('获取列表失败')
  }
}

onMounted(() => {
  getrecommend()
})

// 导航栏计算的属性
const categoryList = computed(() => {
  return ((recommendList.value || {}).categoryHotSellModule || {}).categoryList || []
})

// 中间三个小图标加 字
const policyDescList = computed(() => {
  return (recommendList.value || {}).policyDescList || []
})

// 尾部两个图片的计算
const fooltImg = computed(() => {
  return (recommendList.value || {}).sceneLightShoppingGuideModule || []
})

// 类目热销榜计算的属性
const categoryList2 = computed(() => {
  return (((recommendList.value || {}).categoryHotSellModule || {}).categoryList || []).slice(0, 2)
})

const categoryList3 = computed(() => {
  return (((recommendList.value || {}).categoryHotSellModule || {}).categoryList || []).slice(2, 9)
})

// 十个图片计算的属性
const kingKongList = computed(() => {
  return ((recommendList.value || {}).kingKongModule || {}).kingKongList || []
})
</script>

<style lang="less" scoped>
.content {
  height: 100%;
  // 头部

  .header {
    height: 44px;
    display: flex;
    align-items: center;
    .header-left {
      width: 2.86667rem;
      height: 1.17333rem;
      background-repeat: no-repeat;
      background-image: url(/src/assets/images-yaning/home.png);
      background-position: -1.6rem -4.8rem;
      background-size: 5.6rem 5.6rem;
    }
    .loginBtn {
      width: 37px;
      height: 20px;
      font-size: 12px;
      text-align: center;
      line-height: 20px;
      border: 1px solid red;
      border-radius: 5px;
      margin-left: 6px;
    }
  }
  // 轮播
  .swipeable {
    width: 100%;
    height: 148px;

    .van-swipe-item {
      .swpierimg {
        width: 100%;
        height: 185px;
      }
    }
  }

  // 轮播底部
  .iconList {
    margin-top: 5px;
    height: 36px;
    display: flex;
    justify-content: space-around;
    .iconItem {
      height: 36px;
      display: flex;
      align-items: center;
      .iconImg {
        width: 16px;
        height: 16px;
      }
      .iconText {
        font-size: 12px;
      }
    }
  }

  // main 12个小图
  .home-wrapper {
    height: 174px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    .home-wrapper-item {
      width: 55px;
      height: 78px;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 5px 10px 4.5px;
      .wrapimg {
        width: 55px;
        height: 55px;
        border-radius: 10px;
      }
      .text {
        font-size: 12px;
      }
    }
  }

  // 中间动态
  .home-main {
    width: 100%;
    height: 230px;

    .floor {
      width: 100%;
      height: 100px;
      background: url(../../assets/images-yaning/a.gif);
      background-size: 100% 100px;
      margin: 0 0 5px;
      position: relative;
      .floor-top {
        position: absolute;
        top: 9px;
        left: 43px;
        width: 80px;
        height: 80px;
        .floor-img {
          width: 80px;
          height: 80px;
        }
      }
    }
    .floor-bot {
      width: 100%;
      height: 110px;
      display: flex;
      justify-content: space-around;
      .floor-item1 {
        width: 115.5px;
        height: 110px;
        background-image: url(https://yanxuan.nosdn.127.net/static-union/1669968591770d1a.png?quality=75&type=webp&imageView&thumbnail=250x0);
        background-size: 100% 100%;
        .img {
          width: 60px;
          height: 60px;
          margin: 44px 0px 0 27px;
        }
      }
      .floor-item2 {
        width: 115.5px;
        height: 110px;
        background-image: url('https://yanxuan.nosdn.127.net/static-union/1669968561618900.png?quality=75&type=webp&imageView&thumbnail=250x0');
        background-size: 100% 100%;
        .img {
          width: 60px;
          height: 60px;
          margin: 44px 0px 0 27px;
        }
      }
      .floor-item3 {
        width: 115.5px;
        height: 110px;
        background-image: url('https://yanxuan.nosdn.127.net/static-union/166996856467a52b.png?quality=75&type=webp&imageView&thumbnail=250x0');
        background-size: 100% 100%;
        .img {
          width: 60px;
          height: 60px;
          margin: 44px 0px 0 27px;
        }
      }
    }
  }
  // 新人专享礼
  .newman {
    width: 100%;
    height: 279px;

    .newmantop {
      width: 100%;
      height: 40px;
      text-align: center;
      .text {
        display: inline-block;
        position: relative;
        font-size: 16px;
      }
      .text:before {
        content: '';
        position: absolute;
        left: -30px;
        top: 9px;
        width: 20px;
        height: 0.05rem;
        background: #333;
      }
      .text:after {
        content: '';
        position: absolute;
        right: -30px;
        top: 9px;
        width: 20px;
        height: 0.05rem;
        background: #333;
      }
    }
    .newmanbot {
      width: 100%;
      height: 219px;
      display: flex;
      justify-content: space-around;
      .left {
        width: 171.5px;
        background: #f9e9cf;
        position: relative;
        .name {
          font-size: 16px;
          padding: 10px 0 0 10px;
        }
        .imgWrap {
          margin: 20px auto;
          width: 129px;
          height: 129px;
          .img {
            height: 100%;
            width: 100%;
          }
        }
      }
      .right {
        width: 171.5px;
        display: flex;
        flex-direction: column;
        .module1 {
          background: #fbe2d3;
          border-radius: 4px;
          display: flex;
          margin-bottom: 10px;
          justify-content: space-around;
          .pic {
            .img {
              width: 100px;
              height: 100px;
            }
          }
          .cnt {
            .title {
              font-size: 16px;
            }
            .subTitle {
              font-size: 12px;
            }
          }
        }
        .module2 {
          background: #fbe2d3;
          border-radius: 4px;
          display: flex;
          justify-content: space-around;
          .pic {
            .img {
              width: 100px;
              height: 100px;
            }
          }
          .cnt {
            .title {
              font-size: 16px;
            }
            .tag {
              font-size: 12px;
              background: #cbb693;
              border-radius: 0.04rem;
              color: #fff;
            }
          }
        }
      }
    }
  }

  // 热销榜
  .hot {
    height: 355px;
    width: 100%;
    display: flex;
    flex-direction: column;

    .hotshop {
      font-size: 16px;
      margin-left: 10px;
      height: 20.8px;
      line-height: 20.8px;
      margin-bottom: 10px;
    }
    .hotcenter {
      height: 100px;
      display: flex;
      justify-content: space-around;
      .left {
        width: 170px;
        height: 100%;
        background: #ebeff6;
        display: flex;

        align-items: center;
        .leftname {
          font-size: 14px;
        }
        .img {
          width: 100px;
          height: 100px;
        }
      }
    }
    .hotbottom {
      width: 100%;
      height: 205px;
      display: flex;
      flex-wrap: wrap;

      .hotbottom-item {
        width: 82.5px;
        height: 90px;
        display: flex;
        flex-direction: column;
        background: #f5f5f5;
        align-items: center;
        margin-top: 8px;
        margin-left: 8px;
        .name {
          font-size: 12px;
        }
        .img {
          margin-top: 3px;
          width: 60px;
          height: 60px;
        }
      }
    }
  }

  // 最后
  .end {
    width: 100%;
    height: 155px;
    display: flex;
    justify-content: space-around;
    .endleft {
      width: 171.5px;
      height: 132px;
      background-size: 171px 132px;
      background-repeat: no-repeat;
      position: relative;
      background-image: url(../../assets/images-yaning/g.png);
      .big {
        margin: 4px 0;
        font-size: 16px;
      }
      .small {
        margin: 2px 0;
        font-size: 12px;
      }
    }
    .endright {
      width: 171.5px;
      height: 132px;
      background-color: #f5f5f5;

      .big {
        margin: 4px 0;
        font-size: 16px;
      }
      .small {
        margin: 2px 0;
        font-size: 12px;
      }
      .buttom {
        display: flex;
        justify-content: space-around;
        .img {
          width: 75px;
          height: 75px;
        }
      }
    }
  }

  // footer
  .footer {
    width: 100%;
    height: 122px;
    background-color: #414141;
    text-align: center;

    .top {
      .btn {
        width: 86px;
        height: 31px;
        color: #fff;
        font-size: 12px;
        margin: 20px;

        background-color: #414141;
      }
    }
    .end {
      font-size: 12px;
      line-height: 16px;
      height: 16px;
      color: #999;
    }
  }
}
</style>
